<template>
  <page-container :scrollY="true">
    <el-row
      style="width: 100%"
      :gutter="50">
      <el-col>
        <DataSummary
          :countInfo="countInfo"
          :dataList="dataList"></DataSummary>
      </el-col>
    </el-row>
    <el-row
      class="chart-row"
      style="height: 500px; width: 100%"
      :gutter="50">
      <el-col style="height: 100%">
        <SaleLineChart :dataList="lineList"></SaleLineChart>
      </el-col>
    </el-row>
    <el-row style="height: 100%; width: 100%">
      <el-col
        class="rank-row"
        style="overflow: hidden; width: 100%"
        :gutter="50">
        <search-form
          v-model="searchForm"
          :searchColumns="searchColumns"
          :searchOptions="{ menuSpan: 5 }"
          @on-search="handleSearch">
        </search-form>
      </el-col>
      <el-col style="height: 500px">
        <avue-table
          :dataList="dataList"
          :loading="loading"
          :page="page"
          :tableColumns="tableColumns"
          :tableOptions="{ menu: false }"
          @onPageChange="onPageChange">
          <template v-slot:menu="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleView(row)">
            </el-button>
          </template>
        </avue-table>
      </el-col>
    </el-row>
  </page-container>
</template>

<script>
import tableMixins from '@/mixins/table'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { searchColumns, tableColumns } from './config/table-config'
import { queryUserPayList } from '@/api/userManage'
import SaleLineChart from './components/sale-linechart.vue'
import DataSummary from './components/data-summary.vue'

export default {
  components: { SaleLineChart, DataSummary },
  mixins: [tableMixins],
  data() {
    return {
      actionType: 'add',
      dataList: [],
      lineList: [],
      countInfo: [],
      childList: [],
      searchForm: {
        dateRange: [this.$startStamp(new Date()), this.$endStamp(new Date())],
      },
      editForm: {},
    }
  },
  computed: {
    ...mapGetters(['commonData', 'device']),
    userList() {
      return this.commonData?.userList ?? []
    },
    searchColumns,
    tableColumns,
  },
  methods: {
    async getList() {
      this.dataList = []

      const searchParams = this.formatSearch()
      const queryParams = {
        ...searchParams,
        page: this.page.currentPage,
        page_size: this.page.pageSize,
      }

      this.loading = true

      const { data } = await queryUserPayList(queryParams)
      this.dataList = data?.list ?? []
      this.lineList = data?.line ?? []
      this.countInfo = data?.sum ?? []
      this.page.total = data?.total ?? 0
      this.summaryData = data ?? {}

      this.loading = false
    },
    // 查询参数格式化
    formatSearch() {
      const searchParams = deepClone(this.searchForm)
      const [start, end] = this.searchForm.dateRange
      searchParams.start = start && this.$dayjs(this.$startStamp(start)).unix()
      searchParams.end = end && this.$dayjs(this.$endStamp(end)).unix()
      delete searchParams.dateRange
      return searchParams
    },

    // 表格操作
    handleView(row) {
      console.log(row)
      this.$router.push({
        path: '/dashboard/simple_film',
        query: { name: row?.film_name, id: row?.film_id },
      })
    },
  },
  mounted() {
    this.handleSearch()
  },
}
</script>

<style lang="scss" scoped>
.card-row,
.chart-row,
.rank-row {
  margin-bottom: 20px;
}
.box-bottom div {
  display: flex;
  justify-content: space-between;
}
</style>
